<!--辅助模块内容-->
<template>
  <div class="auxiliary-body">
    <el-popover
        @show="showQrcode"
        @hide="hideQrcode"
        placement="left"
        trigger="click">
      <!--      二维码-->
      <div class="auxiliary-qrcode">
        <div id="studentPic_qrcode" class="qrcodeBox"></div>
        <p class="qrcode-data-title">
          <span>用手机扫码进行填写</span>
          <span>同步时请勿关闭二维码</span>
        </p>
<!--        <el-button type="primary" round class="qrcode-data-get" icon="el-icon-refresh" size="medium" @click="getDataFn">-->
<!--          同步移动端数据-->
<!--        </el-button>-->
      </div>
      <div class="auxiliary-icon" slot="reference">
        <i class="iconfont iconshoujidiannao"></i>
        辅助输入
      </div>
    </el-popover>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import {insertSet, insertGet} from '@/api/admin/auxiliaryModule'
import {mapActions, mapGetters} from "vuex";

export default {
  props: ['typeData', 'optionData'],
  name: "AuxiliaryModule",
  data() {
    return {
      url_: '',
      timeNumberFn: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    this.getUrlDoc()
  },
  methods: {
    ...mapActions(['getSetting']),
    showQrcode(){
      let n = this
      n.timeNumberFn = setInterval(() => {
        n.getDataFn()
      }, 1500)
    },
    hideQrcode(){
      clearInterval(this.timeNumberFn)
    },
    // 设置缓存内容
    insertSetFn() {
      // 需要先将所需要的数据进行设置缓存
      let n = this;
      let dataGet = JSON.parse(JSON.stringify(this.$auxiliaryModule[this.typeData]))
      // 空值，动态内容赋值
      if (!dataGet.form.length) {
        let a = [];
        // 入库
        if(this.typeData === 'warehousing'){
          for(let i in this.optionData){
            a.push({name:`${this.optionData[i].name}-入库照`,type: "img", number: 1, key: "pic",cut: 0,size:'',id: i})
          }
        }
        dataGet.form = a
      }
      console.log('需要存储的数据：', this.optionData , dataGet)
      insertSet({user_id: this.userInfo.id, list: JSON.stringify(dataGet)}).then(res => {
        n.$nextTick(() => {
          n.qrcode()
        })
      })
    },
    // 生成二维码
    getUrlDoc() {
      let n = this;
      this.getSetting().then(res => {
        console.log('系统信息内容：', res)
        if (!res.vo.url) {
          this.$confirm('未获取学校链接，请联系管理员正确填写网址！（例：http://xxx.xxx.xxx）', '提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          });
          return
        }
        this.url_ = res.vo.url
        this.insertSetFn()
        // this.$nextTick(() => {
        //   n.qrcode(res.vo.url)
        // })
      });
    },
    qrcode() {
      console.log('生成二维码所需要的参数：', this.$auxiliaryModule[this.typeData])
      let dataGet = JSON.parse(JSON.stringify(this.$auxiliaryModule[this.typeData]))
      // let dataOption = JSON.stringify(dataGet.form)
      // &data=${encodeURIComponent(dataOption)}
      let params_ = `?page=${dataGet.page}&user_id=${this.userInfo.id}`
      new QRCode('studentPic_qrcode', {
        width: 200,
        height: 200, // 高度
        correctLevel: 3, //QRCode.CorrectLevel.H
        text: `${this.url_}/workers/#/auxiliaryModule${params_}`, // 二维码内容
      })
    },
    getDataFn() {
      insertGet({user_id: this.userInfo.id}).then(res => {
        let data = res.list ? JSON.parse(res.list) : '';
        if (!res.list || this.typeData !== data.page || !data.list) {
          // this.$confirm('未找到相关数据，请确认是否在移动端输入提交?', '提示', {
          //   confirmButtonText: '确定',
          //   showCancelButton: false,
          //   type: 'warning'
          // }).then(() => {
          // }).catch(() => {
          // });
          return
        }
        this.$emit('getInformation', data.list)
      })
    }
  }
}
</script>

<style scoped>
.auxiliary-icon {
  width: 50px;
  height: 50px;
  background: #ff7b00;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  border: 1px solid #ff7b00;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 2700ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  position: fixed;
  right: 10px;
  top: 110px;
  cursor: pointer;
  flex-direction: column;
  font-size: 8px;
}

.auxiliary-icon .iconfont {
  margin: 0;
  font-size: 26px;
  height: 20px;
}

@-webkit-keyframes breathe {
  0% {
    opacity: .6;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    border: 1px solid rgba(59, 235, 235, 1);
    box-shadow: 0 1px 20px rgba(59, 255, 255, 1);
  }
}

.auxiliary-qrcode {
  display: flex;
  flex-direction: column;
}

.qrcode-data-get {
  margin-top: 10px;
}

.qrcode-data-title {
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
}
.qrcode-data-title span{
  display: block;
}
</style>
